<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="icon" href="/favicon.ico">
  <title>document</title>
  <link rel="stylesheet" href="./css/vant.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/vue@2.6.4.js"></script>
  <script src="./js/vant.js"></script>
  <script src="./js/axios.js"></script>
</head>

<body>
  <div id="login">
    <van-form>
      <van-field v-model="formData.name" name="用户账号" label="用户账号" placeholder="用户账号"
        :rules="[{ required: true, message: '请填写用户账号' }]"></van-field>
      <van-field v-model="formData.psw" type="password" name="登录密码" label="登录密码" placeholder="登录密码"
        :rules="[{ required: true, message: '请填写登录密码' }]"></van-field>
      <van-field v-model="formData.paypsw" type="password" name="密码" label="支付密码" placeholder="支付密码"
        :rules="[{ required: true, message: '请填写支付密码' }]"></van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" @click="onSubmit" :loading="loading" loading-text="登陆中...">登陆</van-button>
      </div>
    </van-form>
  </div>

  <script>
    const option = {
      el: "#login",
      data: {
        loading: false,
        formData: { name: 243411, psw: 123456, paypsw: 121111 },
      },
      methods: {
        async onSubmit() {
          if (this.loading) return;
          this.loading = true;
          try {
            let { data } = await axios({
              url: '/api/dologin',
              data: this.formData
            });
            let res = data;
            if (res.msg == '登陆成功') {
              vant.Toast.success(res.msg);
              window.localStorage.setItem('userinfo', JSON.stringify(res))
              window.location.href = "./main.html";
            } else {
              throw '登录失败'
            }
          } catch (error) {
            vant.Toast.fail('登录失败');
          }
          this.loading = false;
        }
      },
    }
    window.VM = new Vue(option);
  </script>
</body>

</html>